// 引入  import drag from 'xxx';  Vue.use(drag) 
// 使用  v-drag
function directive() { }
directive.install = function (Vue) {
  
  Vue.directive("drag", {
    inserted: function (el) {
      let dragBox = el; //获取当前元素
      dragBox.onmousedown = (e) => {
        //算出鼠标相对元素的位置
        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        document.onmousemove = (e) => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          //移动当前元素
          dragBox.style.left = left + "px";
          dragBox.style.top = top + "px";
        };
        document.onmouseup = (e) => {
          //鼠标弹起来的时候不再移动
          document.onmousemove = null;
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    }
  })
  // 父元素
  Vue.directive("dragParent", {
    inserted: function (el) {
      let dragBox = el; 
      dragBox.onmousedown = (e) => {
        let disX = e.clientX - dragBox.parentNode.offsetLeft;
        let disY = e.clientY - dragBox.parentNode.offsetTop;
        document.onmousemove = (e) => {
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          dragBox.parentNode.style.left = left + "px";
          dragBox.parentNode.style.top = top + "px";
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    }
  })

  Vue.directive("focus", {
    inserted: function (el) {
      el.focus&&el.focus()
    }
  })
}
export default directive;